<script type="text/javascript" src="{{$LAYOUT_HELPER_URL}}front/js/jquery.validate.js"></script>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function submitForm()
{
	$('#contact').submit();
}

$().ready(function() {
    // validate signup form on keyup and submit
    $("#contact").validate({
        rules: {
            'data[name]': "required",
            'data[phone]': "required",        
            'data[message]': "required",      
            'data[captcha]': "required"
            
        },
        messages: {
            'data[name]': "",
            'data[phone]': "",
            'data[message]': "",
            'data[captcha]': ""
        }
    }); 

    initialize();
});


function initialize() {
    var latlng = new google.maps.LatLng(10.771894,106.657885);
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
	var image = new google.maps.MarkerImage(
	    '{{$LAYOUT_HELPER_URL}}front/images/marker-images/image.png',
	    new google.maps.Size(200,70),
	    new google.maps.Point(0,0),
	    new google.maps.Point(100,70)
	  );

	  var shadow = new google.maps.MarkerImage(
	    '{{$LAYOUT_HELPER_URL}}front/images/marker-images/shadow.png',
	    new google.maps.Size(238,70),
	    new google.maps.Point(0,0),
	    new google.maps.Point(100,70)
	  );

  var shape = {
    coord: [195,0,196,1,197,2,198,3,198,4,198,5,199,6,199,7,199,8,199,9,199,10,199,11,199,12,199,13,199,14,199,15,199,16,199,17,199,18,199,19,199,20,199,21,199,22,199,23,199,24,199,25,199,26,199,27,199,28,199,29,199,30,199,31,199,32,199,33,199,34,199,35,199,36,199,37,199,38,199,39,199,40,199,41,199,42,199,43,199,44,199,45,199,46,199,47,199,48,199,49,199,50,199,51,199,52,199,53,199,54,198,55,198,56,198,57,197,58,196,59,195,60,192,61,109,62,107,63,106,64,105,65,104,66,102,67,101,68,100,69,99,69,98,68,97,67,95,66,94,65,93,64,92,63,90,62,7,61,3,60,2,59,1,58,1,57,0,56,0,55,0,54,0,53,0,52,0,51,0,50,0,49,0,48,0,47,0,46,0,45,0,44,0,43,0,42,0,41,0,40,0,39,0,38,0,37,0,36,0,35,0,34,0,33,0,32,0,31,0,30,0,29,0,28,0,27,0,26,0,25,0,24,0,23,0,22,0,21,0,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,0,5,0,4,1,3,1,2,2,1,4,0,195,0],
    type: 'poly'
  };
	
    var marker = new google.maps.Marker({
        position: latlng, 
        map: map,
        icon: image,
        shadow: shadow,
        shape: shape,
        title:"Đại học Bách Khoa TP.Hồ Chí Minh"
    });
  }
</script>

<style>
.box_comment {
    background: url({{$LAYOUT_HELPER_URL}}front/images/bg_box_comment.jpg) repeat-x scroll center bottom transparent;
    border: 1px solid #C5C5C5;
    min-height: 266px;
    padding: 10px;
}
.w350 {
    width: 350px;
}
.m10b {
    margin-bottom: 10px;
}
.float_right {
    float: right;
}
.box_comment label {
    float: left;
    font-weight: 700;
    width: 105px;
}

.txt_comment {
    background: url({{$LAYOUT_HELPER_URL}}front/images/bg_txt.jpg) repeat-x scroll center bottom transparent;
    border: 1px solid #CCCCCC;
    float: left;
    height: 21px;
    margin-bottom: 5px;
    padding: 2px;
}

.box_comment textarea {
    background: url({{$LAYOUT_HELPER_URL}}front/images/bg_txt.jpg) repeat-x scroll center bottom #FFFFFF;
    border: 1px solid #CCCCCC;
    float: left;
    height: 90px;
    margin-bottom: 5px;
    padding: 2px;
}

.w230 {
    width: 230px;
}
.cb {
    clear: both;
    font-size: 0;
}
.w115 {
    width: 115px;
}
.m5l {
    margin-left: 5px;
}
.float_left {
    float: left;
}
</style>

<div id="content">	
	<div id="register">
		<div id="title"><span class="yel">Liên hệ</span></div>
	</div>

	<div style="width: 700px; float: left;">
        <div class="p15t">
          <div style="width: 317px;float: left;">
            <div style="border-bottom: 1px dotted #333333;padding-bottom: 5px; padding-top: 15px;"> <strong>Trụ sở chính:</strong> 268 Lý Thường Kiệt, Phường 14, Quận 10,  TP.Hồ Chí Minh</div>
            <div>
                  <p style=" border-bottom: 1px solid #CDCDCD; padding: 11px 0px 15px 11px;font-size: 15px;color:#C20F12; font-weight: bold;"><img src="{{$LAYOUT_HELPER_URL}}front/images/icon_contact.png" align="left" />
                    <span style="padding-left: 5px;">Hotline : 0902 36 33 30</span> <br/>
                </p>
                <p style="border-top: 1px solid #FFFFFF; border-bottom: 1px solid #CDCDCD;  padding: 10px 0px 15px 15px; font-size: 15px;"><img src="{{$LAYOUT_HELPER_URL}}front/images/icon_email.png" align="left" style="margin-top: -5px;"/><span style="padding-left: 11px;" ><a href="mailto:info@bkpay.vn">info@bkpay.vn</a></span></p>
            </div>
          </div>
          
          
         
          <div class="box_comment w350 m10b float_right">
          
	          {{if $contactMessage|@count > 0}} 
	          		<div class="notification-error">       	
	          			{{$contactMessage.message}}
	          		</div>       	
	       		{{/if}}   
	          
	          <div class="input_form">
	          
		          <form method="POST" id="contact" name="contact">  
		          	     
		            <label>Name<span style="color:red">*</span></label>
		            <input class="txt_comment w230" name="data[name]" type="text" style="width: 230px;" />
		            <br class="cb" />
		            
		            <label>E-mail<span style="color:red">*</span></label>
		            <input class="txt_comment w230" name="data[email]" type="text" style="width: 230px;"/>
		            <br class="cb" />
		            
		            <label>Phone<span style="color:red">*</span></label>
		            <input class="txt_comment w230" name="data[phone]" type="text" style="width: 230px;"/>
		            <br class="cb" />
		            
		            <label>Message<span style="color:red">*</span></label>
		            <textarea name="data[message]" class="w230" cols="" rows=""></textarea>
		            <br class="cb" />
		            
		            <label>Code<span style="color:red">*</span></label>
			        <input class="txt_comment w115" name="data[captcha]" type="text" style="width: 115px;"/>
			        <span class="float_left m5l"><img src="{{$LAYOUT_HELPER_URL}}front/captcha/create_image.php?r={{$randomNumber}}" style="padding-top:4px;" /></span>
			        <br class="cb" />
			        
			        <label>&nbsp;</label>
			        <input onclick="javascript:submitForm();" name="" type="button" value="Gửi"/><br class="cb" />
		            
		           </form>
	          </div>
          </div>
          
  	<div class="clear"></div>
        <div class="cb"></div>
        </div>
        <div id="map_canvas" style="width:698px; height:383px"></div>
      </div>
      
      <!-- HELPER BAR -->
	{{sticker name=helper_bar}}
	<!-- END HELPER BAR -->		
	
</div>
